@model RecipeViewModel[]
@using OrchardCore.Recipes.ViewModels;

<div class="row">
    <div class="form-group col mb-n1">
        <h1>@RenderTitleSegments(T["Recipes"])</h1>
    </div>
</div>
<form autocomplete="off">
    <div class="card mb-3">
        <div class="card-body bg-light p-3">
            <div class="form-group mb-n1">
                <div class="input-group input-group-sm w-lg-50">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-secondary text-light">@T["Filter"]</span>
                    </div>
                    <input id="search-box" class="form-control mr-sm-2" placeholder="@T["Search"]" type="search" autofocus>
                </div>
            </div>
        </div>
    </div>
</form>

<form asp-action="Recipes">
    @{
        var recipeGroups = Model.GroupBy(f => f.Feature).ToList();
        foreach (var recipeGroup in recipeGroups)
        {
            var groupName = recipeGroup.Key;

            <div class="recipe-group">
                @{
                    var groupRecipeNames = String.Join(" ", recipeGroup.Select(r => r.Name));
                }
                <h4 class="mb-2 mt-3" data-filter-value="@groupName @groupRecipeNames">@groupName</h4>
                <ul class="list-group" data-filter-value="@groupName @groupRecipeNames">
                    @foreach (var recipe in recipeGroup)
                    {
                        <li class="list-group-item" data-filter-value="@groupName @recipe.Name">
                            <div class="row">
                                <div class="col-md-10">
                                    <h6>@recipe.Name</h6>
                                    <p class="text-muted">@recipe.Description</p>
                                    <div>
                                        @if (recipe.IsSetupRecipe)
                                        {
                                            <span class="badge badge-warning">
                                                @T["Setup Recipe"]
                                            </span>
                                        }

                                        @if (recipe.Tags != null && recipe.Tags.Any())
                                        {
                                            @foreach (var tag in recipe.Tags)
                                            {
                                                <span class="badge badge-info">
                                                    @tag
                                                </span>
                                            }
                                        }
                                    </div>
                                </div>
                                <div class="col-md-2 text-right">
                                    <a asp-action="Execute" asp-route-basePath="@recipe.BasePath" asp-route-fileName="@recipe.FileName" role="button" class="btn btn-primary btn-sm" data-title="@T["Recipes"]" data-message="@T["Are you sure you want to run the recipe?"]" data-ok-text="@T["Yes"]" data-cancel-text="@T["No"]" data-ok-class="btn-primary" itemprop="RemoveUrl UnsafeUrl">@T["Run"]</a>
                                </div>
                            </div>
                        </li>
                    }
                </ul>
            </div>
            <div id="list-alert" class="alert alert-info d-none" role="alert">
                @T["<strong>Nothing here!</strong> Your search returned no results."]
            </div>
        }
    }
</form>
<script at="Foot" type="text/javascript">
    $(function () {
        var searchBox = $('#search-box');

        // On each keypress filter the list of features
        searchBox.keyup(function (e) {
            var search = $(this).val().toLowerCase();
            var elementsToFilter = $("[data-filter-value]");

            // On ESC, clear the search box and display all features
            if (e.keyCode == 27 || search == '') {
                searchBox.val('');
                elementsToFilter.toggle(true);
            }
            else {
                elementsToFilter.each(function () {
                    var text = $(this).data('filter-value').toLowerCase();
                    var found = text.indexOf(search) > -1;
                    $(this).toggle(found);
                });

                var visible = $('.recipe-group > ul > li:visible');
                if (visible.length == 0) {
                    $('#list-alert').removeClass("d-none");
                }
                else {
                    $('#list-alert').addClass("d-none");
                }
            }
        });
    });
</script>
